<template>
	<view
		:style="'background: url(' + imgData.homeBg + ') no-repeat;background-size: contain;height:' + systemInfo.screenHeight + 'px'">
		<u-navbar title=" " :autoBack="false" bgColor="transparent" :fixed="false">
			<view @click="jumpPage('/pages/common/city')" url="/pages/common/city" class="u-nav-slot" slot="left">
				<u-icon name="arrow-down-fill" :label="cityName ? cityName : '加载中...'" labelPos="left" color="#fff" labelColor="#fff"
					size="12"></u-icon>
			</view>
		</u-navbar>
		<view class="p-30">
			<u-swiper :list="swiperData" keyName="image" height="150" indicator indicatorMode="line"></u-swiper>
			<!-- <image src="/static/img/21.png" mode="widthFix" style="width: 100%;height: 200rpx;">
			</image> -->
			<view class="flex-row flex-warp justify-between nav">
				<view @click="jumpPage(item.path)" class="flex-column justify-center align-center"
					v-for="(item,index) in navList">
					<image :src="item.img" mode="widthFix" style="width: 100rpx;height: 100rpx;">
					</image>
					<view class="mt-10">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="p-30 content">
			<view class="title">
				套餐列表
			</view>
			<view class="mt-30">
				<u-scroll-list :indicator="false">
					<view class="tag" style="flex-direction: row;">
						<view class="tag-item" @click.stop="tagClick(item)" :class="{'active':tag_id == item.id}"
							v-for="(item,index) in tagData">
							{{item.name}}
						</view>
					</view>
				</u-scroll-list>
				<view class="tag">
					<view class="tag-item" @click.stop="tagClick1(item)" :class="{'active':condition == item.value}"
						v-for="(item,index) in tagItem2">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="box mt-30">
				<template v-if="!noData">
					<view :class="{'mt-30':index != 0}" v-for="(item,index) in list">
						<item :item="getItem(item)">
							<view class="item-btn" slot="btn">
								立即下单
							</view>
						</item>
					</view>
					<u-loadmore :status="status" />
				</template>
				<template v-else>
					<u-empty mode="data">
					</u-empty>
				</template>
			</view>
		</view>
		<page-tabbar :value="0" />
		<u-toast ref="uToast"></u-toast>
		<login ref="login" />
	</view>
</template>

<script>
	import {
		packageList,
		swiper,
		home
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				tagItem2: [{
						'title': '最新',
						'value': 1
					}, {
						'title': '智能排序',
						'value': 2
					},
					// {
					// 	'title': '只看未能解锁',
					// 	'value': 3
					// },
				],
				navList: [],
				swiperData: [],

				tag_id: 0,
				condition: 1,
				state: 2,

				status: 'loading',
				list: [],
				noData: false,
				page: 1,
				total: 0
			}
		},
		watch:{
			city(v1,v2) {
				this.init()
			}
		},
		computed: {
			...mapState(['tagData', "p_id"]),
		},
		onLoad(e) {
			var scene = decodeURIComponent(e.scene);
			console.log('scenescene',scene);
			if (e.user_id) this.$store.state.p_id = e.user_id;
			if (scene) this.$store.state.p_id = scene;
			if (this.isLogin) {
				if (this.p_id) this.$store.dispatch('setBindParent', {
					'user_id': this.p_id
				})
			}
			this.initData();
		},
		methods: {
			getItem(item) {
				return {
					id: item.id,
					tag_name: item.tag.name,
					name: item.name,
					staff_figure: item.staff.figure,
					value: item.value,
					staff_service_text: item.staff.service_text ? item.staff.service_text.toString() : '',
					staff_service1_text: item.staff.service1_text ? item.staff.service1_text.toString() : '',
					price: item.price,
					starttime: item.starttime,
					endtime: item.endtime,
					staff_image: item.image,
					staff_id: item.staff_id
				}
			},
			tagClick(item) {
				this.tag_id = item.id
				this.init();
			},
			tagClick1(item) {
				this.condition = item.value
				this.init();
			},
			async initData() {
				await this.getHome()
				await this.getSwiper()
				await this.init()
			},
			getHome() {
				return new Promise((resolve, reject) => {
					home().then(res => {
						console.log('home', res);
						this.navList = res.navList
						resolve()
					})
				})
			},
			getSwiper() {
				return new Promise((resolve, reject) => {
					swiper().then(res => {

						this.swiperData = res
						console.log('swiperswiper', this.swiperData);
						resolve()
					})
				})
			},
			init() {
				return new Promise((resolve, reject) => {
					this.status = "loading";
					this.list = [];
					this.page = 1;
					this.noData = false;
					this.getList();
					resolve()
				})
			},
			getList() {
				let vm = this;
				let params = {
					'page': this.page,
					'limit': this.$u.config.limit,
					'tag_id': this.tag_id,
					'condition': this.condition,
					'state': 2,
					'city':this.city
				};
				packageList({
					params
				}).then(res => {
					console.log(res.rows.length);
					if (res.rows.length != 0) {
						this.noData = false;
						this.list = this.list.concat(res.rows);
						this.total = res.total;
						this.page++;
						this.status = "loadmore"
					} else {
						this.noData = true;
						this.status = "nomore"
					}
				}).catch(err => {
					vm.$refs.uToast.show({
						type: 'error',
						message: err.message,
						complete() {
							vm.loading = false;
						}
					})
				})
			},
			//上拉
			onPullDownRefresh() {
				this.status = "loading"
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//下拉
			onReachBottom() {
				let vm = this;
				this.status = 'loading';
				//延时为了看效果
				setTimeout(() => {
					if (vm.page > Math.ceil(vm.total / this.$u.config.limit)) {
						this.status = 'nomore';
					} else {
						vm.getList();
					}
				}, 200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		margin: 30rpx 0;
		color: #FFD8B5;
	}

	.content {
		// background-image: linear-gradient(#FFEAE9,#FFEAE9,#FFFFFF);
		background-image: linear-gradient(#FFEAE9 2%, #F7F8FA 50%);
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		min-height: 1000rpx;
		padding-bottom: 120rpx;
	}

	.tag {
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
		// margin-top: 30rpx;

		&-item {
			border: 1rpx solid #E6E6E6;
			padding: 10rpx 20rpx;
			margin-left: 10rpx;
			color: #575859;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 24rpx;
			width: 120rpx;
			text-align: center;
		}

		&-item:first-child {
			margin: 0;
		}
	}

	.active {
		color: #A11A0E;
		border-color: #A11A0E;
		background-color: transparent;
	}
</style>